import React, { Component } from 'react'

export default class Test extends Component {
  state = {
    msg: 'hello',
  }
  // 只会在更新阶段执行
  // nextProps和nextState表示最新的数据
  shouldComponentUpdate(nextProps, nextState) {
    // shouldComponentUpdate要求写返回值,值为true,则组件更新,为false,则组件不更新
    // return true
    // 拿到上一次的props数据和最新的props数据
    // 其他的所有的生命周期钩子函数中,this.props或者是this.state拿到的一定是最新的数据,但是shouldComponentUpdate里面this.props或this.state拿到其实是上一次的数据
    // console.log('旧', this.props)
    // console.log('新', nextProps)

    // if (this.props.count === nextProps.count) {
    //   return false
    // } else {
    //   return true
    // }
    return (
      this.props.count !== nextProps.count || this.state.msg !== nextState.msg
    )
  }
  render() {
    const { count } = this.props
    const { msg } = this.state
    console.log('Test的render执行了')
    return (
      <>
        <div>
          Test, {count}, {msg}
        </div>
        <button
          onClick={() => {
            this.setState({
              msg: '123',
            })
          }}
        >
          test的按钮
        </button>
      </>
    )
  }
}
